<template>
  <div class="wrapper">
    <el-breadcrumb>
      <el-breadcrumb-item>营销活动管理</el-breadcrumb-item>
      <el-breadcrumb-item>营销通告设置</el-breadcrumb-item>
    </el-breadcrumb>
   
    <div class="easy-content">
      <el-form :inline="true">
        <el-form-item style="margin-right:15px">
          <el-dropdown @command="setState">
            <span class="el-dropdown-link">
              {{stateStr}}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="{title:'全部状态',id:''}">全部</el-dropdown-item>
              <el-dropdown-item :command="{title:'进行中',id:'1'}">进行中</el-dropdown-item>
              <el-dropdown-item :command="{title:'已过期',id:'2'}">已过期</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-form-item>
        <el-form-item style="margin-right:15px">
          <el-cascader :options="deptList"
            :props="{ value: 'deptId', label: 'deptName'}"
            v-model="dept"
            :show-all-levels="false"
            placeholder="请选择部门"
            change-on-select
            @change="setDeptId"
            clearable>
          </el-cascader>
        </el-form-item>
        <el-form-item>
          <el-dropdown @command="seTimeType">
            <span class="el-dropdown-link">
              {{timeTypStr}}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="{title:'全部时间',id:''}">全部</el-dropdown-item>
              <el-dropdown-item :command="{title:'活动时间',id:'1'}">活动时间</el-dropdown-item>
              <el-dropdown-item :command="{title:'创建时间',id:'2'}">创建时间</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-form-item>
        <el-form-item style="margin-right:20px">
          <el-date-picker v-model="startEndTime"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :disabled="isDisable"
            clearable
            :editable="false"
            @change="timeSearch">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-input v-model="search"
            placeholder="请输入标题/目标/创建人"
            clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
            @click.native="_search"
            class="btn"
            size="small">
            <i class="el-icon-search"></i>
          </el-button>
        </el-form-item>
        <el-form-item class="fr btn">
          <el-button type="primary"
            size="small"
            v-has="'noticeinfo'"
            @click.native="_add">
            新增
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-table :data="noticeList">
            <el-table-column label="编号"
              min-width="100"
              prop="id">
            </el-table-column>
            <el-table-column label="通告标题"
              min-width="100"
              prop="title">
            </el-table-column>
            <el-table-column label="活动目标"
              min-width="100"
              prop="target">
            </el-table-column>
            <el-table-column label="活动时间"
              min-width="150"
              prop="time">
            </el-table-column>
            <el-table-column label="参与部门"
              min-width="200">
              <template slot-scope="scope">
                <el-popover trigger="hover"
                  placement="top">

                  <p style="min-width:300px; max-width:400px">
                    <el-tag :key="tag"
                      class="tag"
                      disable-transitions
                      v-for="tag in scope.row.deptNames ? scope.row.deptNames.split(',') : []">
                      {{tag}}
                    </el-tag>
                  </p>
                  <div slot="reference"
                    class="name-wrapper">
                    <el-tag size="medium"
                      disable-transitions
                      style="white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;width:200px;">{{ scope.row.deptNames }}</el-tag>
                  </div>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column label="状态"
              min-width="100">
              <template slot-scope="scope">
                {{scope.row.status ==1?"进行中":"已过期"}}
              </template>
            </el-table-column>
            <el-table-column label="创建人"
              min-width="100"
              prop="name">
            </el-table-column>
            <el-table-column label="创建时间"
              min-width="100"
              prop="create">
            </el-table-column>
            <el-table-column label="操作"
              min-width="150">
              <template slot-scope="scope">
                <el-button type="text"
                  size="small"
                  @click="_view(scope.row)"  v-has="'noticeinfo'">查看详情</el-button>
                <el-button type="text"
                  size="small"
                  @click="__update(scope.row)" v-has="'noticeinfo'">修改</el-button>
                <el-button type="text"
                  size="small"
                  @click="_delete(scope.row.id)" v-has="'noticedelete'">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item class="fr">
          <el-pagination @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, prev , pager , next, sizes"
            :total="total"
            style="margin-top:20px">
          </el-pagination>
        </el-form-item>
      </el-form>
      <!-- 新增修改查看弹窗 -->
      <el-dialog :title="title"
        :visible.sync="dialogVisible"
        v-if="dialogVisible"
        width="30%">
        <el-form label-width="80px">
          <el-form-item label="通告标题："
            required>
            <el-input placeholder="请输入通告标题"
              v-filterSpecialChar
              v-model="updateData.title"
              maxlength="20"
              clearable
              :disabled="isView"></el-input>
          </el-form-item>
          <el-form-item label="活动目标："
            required>
            <el-input placeholder="请输入活动目标"
              v-filterSpecialChar
              v-model="updateData.target"
              maxlength="20"
              clearable
              :disabled="isView"></el-input>
          </el-form-item>
          <el-form-item label="活动时间："
            required>
            <el-date-picker v-model="updateData.startEndTime"
              type="daterange"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="timeSearch"
              :editable="false"
              :disabled="isView">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="参与部门："
            required>
            <el-tag :key="index"
              class="tag"
              v-for="(item,index) in dynamicTags"
              disable-transitions>
              {{item.deptName}}
            </el-tag>
            <el-button class="button-new-tag"
              size="small"
              @click="_selectDept"
              :disabled="isView">+ 选择部门</el-button>
          </el-form-item>
          <el-form-item label="通告正文："
           
            v-filterSpecialChar
            required>
            <el-input type="textarea"
              v-model="updateData.content"
               maxlength="50"
              dialogVisible
              clearable
              :disabled="isView"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer"
          class="dialog-footer">
          <span v-if="!isView">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary"
              @click="_sure">发布</el-button>
          </span>
          <span v-if="isView">
            <el-button @click="dialogVisible = false">返回</el-button>
          </span>
        </span>
      </el-dialog>
      <!-- 选择部门 -->
      <el-dialog title="部门选择"
        :visible.sync="departmenVisible">
        <ul class="wrap">
          <li v-for="item in noticeDepts"
            :key="item.deptId">
            <p>
              <el-checkbox v-model="item.check">
                <span class="title">{{item.deptName}}</span>
              </el-checkbox>
            </p>
          </li>
        </ul>
        <span slot="footer"
          class="dialog-footer">
          <el-button @click="departmenVisible = false">取 消</el-button>
          <el-button type="primary"
            @click="_selectDeptSure">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  getNoticeList,
  deleteNotice,
  getNoticeMember,
  updateNotice
} from "@/public/js/notice.js";

export default {
  components: {
   
  },
  props: {},
  data() {
    return {
      noticeList: [],
      state: "",
      stateStr: "全部状态",
      dept: [],
      deptList: [],
      startEndTime: [],
      pageNum: 1,
      pageSize: 10,
      search: "",
      timeType: "",
      timeTypStr: "日期类型",
      isDisable: true,
      deptId: "",
      total: 0,
      title: "新增营销通告",
      dialogVisible: false,
      departmenVisible: false,
      noticeDepts: [],
      dynamicTags: [],
      id: "",
      isView: true,
      updateData: {
        title: "",
        target: "",
        startEndTime: [],
        content: ""
      },
      cloneNoticeDepts: []
    };
  },
  watch: {},
  computed: {},
  methods: {
    //状态查询
    setState(command) {
      this.state = command.id;
      this.stateStr = command.title;
      this.pageNum = 1;
      this.pageSize = 10;
      this._getNoticeList();
    },
    // 部门查询
    setDeptId() {
      this.deptId = this.dept[this.dept.length - 1];
      this.pageNum = 1;
      this.pageSize = 10;
      this._getNoticeList();
    },
    // 时间类型选择
    seTimeType(command) {
      this.timeType = command.id;
      this.timeTypStr = command.title;
      if (!this.timeType) {
        this.isDisable = true;
      } else {
        this.isDisable = false;
      }
    },
    // 根据时间查询
    timeSearch(val) {
      this.startTime = val ? val[0] : "";
      this.endTime = val ? val[1] : "";
      this.pageNum = 1;
      this.pageSize = 10;
      this._getNoticeList();
    },
    // 搜索
    _search() {
      this.pageNum = 1;
      this.pageSize = 10;
      this._getNoticeList();
    },
    // 获取列表数据
    _getNoticeList() {
      getNoticeList({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        timeType: this.timeType,
        startTime: this.startTime,
        endTime: this.endTime,
        state: this.state,
        dept: this.deptId,
        search: this.search
      }).then(res => {
        console.log(res);
        this.noticeList = res.data.noticeList;
        this.total = res.data.total;
      });
    },
    // 获取部门列表数据
    _getNoticeMember() {
      getNoticeMember().then(res => {
        this.noticeDepts = res.data.noticeDepts;
        this.deptList = res.data.noticeDepts;
        this.cloneNoticeDepts = JSON.parse(
          JSON.stringify(res.data.noticeDepts)
        );
      });
    },
    //选择部门
    _selectDept() {
      this.noticeDepts = JSON.parse(JSON.stringify(this.cloneNoticeDepts));
      this.dynamicTags.forEach(item => {
        this.noticeDepts.forEach(i => {
          if (i.deptId == item.deptId) {
            i.check = true;
          }
        });
      });
      this.departmenVisible = true;
    },
    // 部门选择确认
    _selectDeptSure() {
      let dynamicTags = [];
      this.noticeDepts.forEach(item => {
        if (item.check) {
          dynamicTags.push({
            deptId: item.deptId,
            deptName: item.deptName
          });
        }
      });
      this.dynamicTags = dynamicTags;
      this.departmenVisible = false;
    },
    // 新增
    _add() {
      this.title = "新增营销通告";
      this.dynamicTags = [];
      this.updateData = {};
      this.id = "";
      this.dialogVisible = true;
      this.isView = false;
    },
    // 删除
    _delete(id) {
      this.$confirm("此操作将永久删除该条信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        deleteNotice({ id: id }).then(res => {
          if (!res.data.errCode) {
            this.$message({
              type: "success",
              message: "删除成功!"
            });
            this._getNoticeList();
          }
        });
      });
    },
    // 修改
    __update(val) {
      this.title = "编辑通告详情";
      this.updateData = {
        title: val.title,
        target: val.target,
        startEndTime: [val.start, val.end],
        content: val.content
      };
      this.id = val.id;
      this.dynamicTags = val.deptList;
      this.dialogVisible = true;
      this.isView = false;
    },
    // 确认
    _sure() {
      console.log(this.updateData);
      console.log(this.dynamicTags);
      //表单验证
      if (!this.updateData.title) {
        this.$message.error("请输入通告标题");
        return false;
      } else if (!this.updateData.target) {
        this.$message.error("请输入活动目标");
        return false;
      } else if (!this.updateData.startEndTime) {
        this.$message.error("请输入活动时间");
        return false;
      } else if (!this.dynamicTags.length) {
        this.$message.error("请选择参与部门");
        return false;
      } else if (!this.updateData.content) {
        this.$message.error("请输入通告正文");
        return false;
      } else {
        let depts = [];
        this.dynamicTags.forEach(item => {
          depts.push(item.deptId);
        });

        updateNotice({
          id: this.id,
          title: this.updateData.title,
          target: this.updateData.target,
          startTime: this.updateData.startEndTime[0],
          endTime: this.updateData.startEndTime[1],
          depts: depts,
          content: this.updateData.content
        }).then(res => {
          if (!res.data.errCode) {
            let message = "";
            message = this.id == "" ? "新增成功" : "修改成功";
            this.$message({
              message: message,
              type: "success"
            });
            this._getNoticeList();
            this.dialogVisible = false;
          }
        });
      }
    },
    // 查看详情
    _view(val) {
      this.title = "查看通告详情";
      this.updateData = {
        title: val.title,
        target: val.target,
        startEndTime: [val.start, val.end],
        content: val.content
      };
      this.id = val.id;
      this.dynamicTags = val.deptList;
      this.dialogVisible = true;
      this.isView = true;
    },
    // 分页
    handleSizeChange(val) {
      this.pageSize = val;
      console.log(this.pageSize);
      this._getNoticeList();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this._getNoticeList();
    }
  },
  created() {
    this._getNoticeList();
    this._getNoticeMember();
  },
  mounted() {}
};
</script>
<style lang="scss" scoped>
.wrapper {
  .el-input {
    width: 200px;
  }
  .el-input__inner {
    height: 34px;
  }
  .el-date-editor--daterange {
    padding: 0 10px;
    width: 250px;
  }
  .btn {
    padding-left: 20px;
    padding-right: 20px;
  }
  .wrap {
    display: flex;
    flex-wrap: wrap;
    & > li {
      padding: 15px;
      width: 20%;
      p {
        & .title {
          font-size: 16px;
        }
      }
    }
  }
}
.edit-content{
  width:800px
}
</style>